<!-- 新建实物奖品 -->
<template>
  <a-drawer v-model:visible="vdata.visible" :maskClosable="false" width="40%">
    <template #title>
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <span v-if="vdata.isAdd">新增审批规则</span>
        <span v-else>修改审批规则</span>
      </div>
    </template>
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :rules="vdata.rules"
      :colon="false"
      :wrapper-col="{ span: 22 }"
      style="margin-top: 30px; margin-left: 20px"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item label="审批顺序" name="examineOrder" >
            <a-input-number v-model:value="vdata.saveObject['examineOrder']" placeholder="审批顺序" :controls="false" :precision="0" :parser="value => value" style="width: 100%;"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="活动类型" name="activityTypeId" >
            <a-select v-model:value="vdata.saveObject['activityTypeId']" placeholder="活动类型" :options="vdata['activityType']" :field-names="{ label: 'activityTypeName', value: 'activityTypeId' }"/>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.visible" :span="12">
          <a-form-item label="机构" name="agentNo">
            <GzTreeSelect ref="gzThreeRef" v-model:value="vdata.saveObject['agentNo']"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="是否为抄送" name="isCopy" >
            <a-select v-model:value="vdata.saveObject['isCopy']" placeholder="是否为抄送">
              <a-select-option :value="0">是</a-select-option>
              <a-select-option :value="1">否</a-select-option>
            </a-select>
            <!-- <a-radio-group v-model:value="vdata.saveObject['type']">
              <a-radio :value="0">微信公众号</a-radio>
              <a-radio :value="1">微信小程序</a-radio>
              <a-radio :value="2">支付宝小程序</a-radio>
            </a-radio-group> -->
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="onClose" >
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc" >
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { req, API_URL_EXAMINE_CONFIG_SAVE, API_URL_EXAMINE_CONFIG_UPDATE, API_URL_ACTIVITY_TYPE } from '@/api/manage'
import { reactive, ref, defineExpose, watch, getCurrentInstance } from "vue";
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const formRef = ref()
const gzThreeRef = ref()

const props = defineProps(['callbackFunc'])

const vdata:any = reactive({
  isAdd: false, // 新增OR修改
  visible: false,
  btnLoading: true,
  saveObject: {},
  rules: {
    examineOrder: [{ required: true, message: "审批顺序不能为空", trigger: "blur" },],
    activityTypeId: [{ required: true, message: "活动类型不能为空", trigger: "blur" },],
    agentNo: [{ required: true, message: "机构不能为空", trigger: "blur" },],
    isCopy: [{ required: true, message: "抄送不能为空", trigger: "blur" },],
  },
});

function handleOkFunc() {
  formRef.value.validate().then(()=>{
    vdata.btnLoading = true
    const URL = vdata.isAdd ? API_URL_EXAMINE_CONFIG_SAVE : API_URL_EXAMINE_CONFIG_UPDATE
    const MESSAGE = vdata.isAdd ? '新增成功' : '修改成功'
    req.add(URL,vdata.saveObject).then(res => {
      props.callbackFunc()
      $infoBox.message.success(MESSAGE)
      onClose()
    }).finally(() => {
      vdata.btnLoading = false
    })
  }).catch(()=>{})
}

function show(record) {
  getActivityType()
  vdata.isAdd = !record
  vdata.saveObject = {
  }
  vdata.btnLoading = false;
  clearFieldValidate()
  if(vdata.isAdd){ // 新增
    vdata.visible = true
  }else{  // 修改
    vdata.saveObject = { ...record }
    vdata.visible = true
  }
}
// 清除字段验证
function clearFieldValidate(){
  if (formRef.value !== undefined) {
    formRef.value.clearValidate();
  }
}
// 获取活动类型ID
function getActivityType(){
  req.list(API_URL_ACTIVITY_TYPE,{}).then(res => {
    vdata.activityType = res.records
  })
}

function onClose() {
  vdata.visible = false;
}

defineExpose({
  show,
});
</script>

<style lang="less" scoped>
.rule{
  display: flex;
  align-items: center;
  gap: 20px;
  *{
    flex-shrink: 0;
  }
  &:nth-child(n + 2){
    margin-top: 10px;
  }
}
.cp{
  cursor: pointer;
}
.fz18{
  font-size: 18px;
}
</style>
